<template>
  <view class="dmbox" :style="{'height': boxheight + 'px', 'background-image': 'url(' + background + ')'}">
    <view v-for="(item, index) in dmlist" :key="index" class="dmlist">
      <view class="td">
        <view class="avaurl" :style="{'background-image': 'url(' + item.avaurl + ')'}">
          <view class="xingji">
            <view v-for="(itm, inx) in item.xingji" :key="inx" class="star">
              ★
            </view>
          </view>
          <view class="gender female" v-if="item.sex === 'female'">♀</view>
          <view class="gender male" v-else>♂</view>
        </view>
        <view class="pa">
          <view class="nickname">
            <text style="font-size: 14px;">{{ item.nickname }}</text>
          </view>
          <span class="golddm" v-if="item.title">{{ item.title }}</span>
        </view>
      </view>
      <view class="td1">
        <text>{{ item.desc }}</text>
      </view>
      <view class="td2">
        <text>{{ item.cnt }}</text>
      </view>
    </view>
    <view class="pages">{{ page }}/{{ totalpage }}</view>
  </view>
</template>

<script>
  // import dmdialog from '@/components/dmDialog'
  export default {
    // components: {
    //     dmdialog
    // },
    props: {
      shopid: 0,
      pptv: 0
    },
    data() {
      return {
        rankname: '',
        dmlist: {},
        page: 1,
        limit: 7,
        totalpage: 0,
        dms: 0,
        boxheight: 370,
        pptvv: 0,
        background: ''
      }
    },

    onLoad() {

    },
    mounted() {
      this.setboxheight()
      this.getDmList()
    },
    destroyed() {
      clearTimeout(this.timer)
    },
    methods: {
      setboxheight() {
        this.pptvv = this.pptv

        // eslint-disable-next-line eqeqeq
        if (this.pptvv == 1) {
          this.boxheight = 530
        } else {
          this.boxheight = 370
        }
      },
      getDmList() {
        this.$http({
          url: `/bigscreen/star_dm`,
          data: {
            pptv: this.pptv,
            shop: this.shopid,
            page: this.page
          },
          method: 'post'
        }).then(response => {
          this.rankname = response.rankname
          this.dmlist = response.list
          this.totalpage = response.totalpage
          this.background = response.background
        }).catch(error => {
          console.log(error)
        })
      },
      timer() {
        return setTimeout(() => {
          this.page++
          if (this.page > this.totalpage) {
            this.page = 1
          }
          this.getDmList()
        }, 10000)
      }
    },
    watch: {
        pptv(newVal,oldVal) {
            this.setboxheight()
        }
    },
  }
</script>

<style lang="less">
  .dmbox {
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    height: 370px;
    position: relative;

    .dmlistth {
      width: 100%;
      height: 50px;

      display: flex;
      justify-content: space-between;
      background-color: rgba(23, 53, 73, .5);

      .th {
        flex: 1;
        text-align: center;
        height: 50px;
        line-height: 50px;
      }

      .th1 {
        flex: 1;
        text-align: center;
        height: 50px;
        line-height: 50px;
      }
    }

    .dmlist {
      width: 100%;
      border-bottom: 1px solid #444;
      display: flex;
      justify-content: flex-start;

      .td {
        flex: 1;
        height: 57px;
        padding: 3px 0 3px 8px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .avaurl {
          width: 40px;
          height: 40px;
          background-position: center;
          background-size: 100% auto;
          background-repeat: no-repeat;
          background-color: #000;
          position: relative;

          .xingji {
            position: absolute;
            width: 100%;
            top: -14px;
            left: 0;
            display: flex;
            justify-content: center;

            .star {
              color: #eebf2f;
              font-size: 14px;
              text-shadow: 0 0 2px #000;
            }
          }

          .gender {
            font-weight: bolder;
            position: absolute;
            width: 16px;
            height: 16px;
            line-height: 16px;
            font-size: 12px;
            text-align: center;
            background: #ddd;
            border-radius: 50%;
            right: 0;
            bottom: 0;
          }

          .male {
            color: #5dcdFA;
          }

          .female {
            color: #ff29c0;
          }
        }

        .pa {
          margin-left: 4px;

          .golddm {
            background-color: #eebf2f;
            background-image: linear-gradient(to right, #eebf2f, #feb, #eebf2f);
            color: #000;
            padding: 2px 4px;
            font-size: 12px;
            border-radius: 4px;
            white-space: nowrap;
          }
        }
      }

      .td1 {
        flex: 2;
        height: 46px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        view {
          width: 100%;
          font-size: 14px;
          display: -webkit-box;
          -webkit-line-clamp: 2; //限制文本的行数，只显示两行
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      .td2 {
        width: 65px;
        height: 57px;
        line-height: 57px;
        text-align: center;
        font-size: 14px;
      }
    }

    .dmlist:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .pages {
      position: absolute;
      right: 3px;
      bottom: 3px;
      ;
      background: rgba(255, 255, 255, .5);
      color: #000;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      font-size: 12px;
    }
  }
</style>